{{define "view"}}
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>查看</title>
        <link rel="stylesheet" href="../layui/css/layui.css">
    </head>
    <body style="background-color: #F2F2F2">
    <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item"><a href="/html/new">新增</a></li>
        <li class="layui-nav-item  layui-this"><a href="">查看</a></li>
    </ul>

    <div class="layui-container" id="load" onload="">

    </div>


    <script src="../layui/layui.js"></script>
    <script>
        function draw(lis, times, datas, data) {
            for (i = 0; i < times; i++) {
                lis.push("</div></div></div>")
            }
            for (i = 0; i < times; i++) {
                if (i == 0) {
                    lis.push(`<div class="layui-collapse" lay-accordion="" lay-filter="needInit">`)
                } else {
                    lis.push(`<div class="layui-collapse" lay-accordion="">`)
                }
                lis.push(`<div class="layui-colla-item">`)


                if (i == times - 1) {
                    var coreText = `<div class="layui-row">
                                            <div class="layui-col-xs6">
                                                <div class="grid-demo grid-demo-bg1"` + ` id=` + data["id"] + `>` + `<span style="color: red">` + datas[i] + "</span>" + `(最后更新于:` + data["updateTime"] + ")" + `</div>
                                            </div>
                                            <div class="layui-col-xs6" style="text-align: right">
                                               <button type="button" class="layui-btn layui-btn-sm" ONCLICK="operating(this,'edit')"><i class="layui-icon">编辑</i></button>
                                                <button type="button" class="layui-btn layui-btn-sm  layui-btn-danger" ONCLICK="operating(this,'detail')"><i class="layui-icon">查看</i></button>
                                            </div>
                                        </div>`

                    lis.push(`<h2 class="layui-colla-title">` + coreText + `</h2>`)
                    lis.push(`<div class="layui-colla-content">` + data["Text"] )
                } else {
                    lis.push(`<h2 class="layui-colla-title">` + datas[i] + `</h2>`)
                    lis.push(`<div class="layui-colla-content">`)
                }
            }

            return lis
        }
        function operating(here,doType) {
            var id = here.parentElement.previousElementSibling.firstElementChild.getAttribute("id")
            var layer = layui.layer;
            var url = "http://" + window.location.host;
            var content = url + "/html/operating/" + doType + "/" + id
            if (doType == "edit"){
                var area = ['500px', '600px']
            }else if (doType == "detail"){
                var area = ['800px', '800px']
            }
            layer.open({
                id:doType,
                type: 2,
                title : "编辑",
                anim:3,
                content:content,
                area: area,
                closeBtn:2,
                shade: [0.8, '#393D49'],
                shadeClose:true,
            });
        }
        Date.prototype.Format = function (fmt) { //author: meizz
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
    </script>
    <script>
        var year = "";
        var month = "";
        var day = "";
        layui.use(['element', 'flow','layer','util'], function () {
            var $ = layui.jquery;
            var flow = layui.flow;
            var element = layui.element;
            var util = layui.util;
            util.fixbar({
                bar1: "&#xe622;",
                bar2: "&#xe758;",
                click: function(type){
                    if(type === 'bar1'){
                       var tagLists = document.getElementsByClassName("layui-colla-content");
                       layui.each(tagLists,function (index,item) {
                           var className = item.className
                           if (className.indexOf("layui-show") == -1){
                               item.className = "layui-colla-content layui-show"
                           }
                       })
                    }else if (type === 'bar2'){
                        var tagLists = document.getElementsByClassName("layui-colla-content layui-show");
                        for (i=tagLists.length-1;i>=0;i--){
                            var className = tagLists[i].className
                            if (className.indexOf("layui-show") != -1){
                                tagLists[i].className = "layui-colla-content"
                            }
                        }
                    }
                }
            });
            flow.load({
                elem: '#load',
                done: function (page, next) {
                    var lis = [];
                    $.get('/api/article', function (res) {
                        layui.each(res.data, function (index, item) {
                            var createdAt = new Date(item["CreatedAt"]);
                            var localYear = String(createdAt.getFullYear());
                            var localMonth = String(createdAt.getMonth() + 1);
                            var localDay = String(createdAt.getDate());
                            var mapData = {"Text":item["Text"],"updateTime":new Date(item["UpdatedAt"]).Format("yyyy-MM-dd hh:mm:ss"),"id":item["ID"]}
                            if (day == "") {
                                lis = draw(lis, 4, [localYear, localMonth, localDay, item["Title"]], mapData)
                                day = localDay
                                month = localMonth
                                year = localYear
                            } else {
                                if (localDay == day) {
                                    lis = draw(lis, 1, [item["Title"]], mapData)
                                } else {
                                    day = localDay
                                    if (localMonth == month) {
                                        lis = draw(lis, 2, [localDay, item["Title"]], mapData)
                                    } else {
                                        month = localMonth
                                        if (localYear == year) {
                                            lis = draw(lis, 3, [localMonth, localDay, item["Title"]], mapData)
                                        } else {
                                            year = localYear
                                            lis = draw(lis, 4, [localYear, localMonth, localDay, item["Title"]], mapData)
                                        }
                                    }
                                }
                            }

                        });
                        next(lis.join('') + "</div>", page < 1);
                        element.render("collapse", "needInit");
                    });
                }
            });
        });
    </script>
    </body>
    </html>
{{end}}